@import "base.scss";

// 这是在线字体
@font-face {
  font-family: 'iconfont';
  src: url('../lib/iconfont/iconfont.eot');
  src: url('../lib/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('../lib/iconfont/iconfont.woff') format('woff'), url('../lib/iconfont/iconfont.ttf') format('truetype'), url('../lib/iconfont/iconfont.svg#iconfont') format('svg');
}

// 阿里巴巴 图标库 http://www.iconfont.cn/
.iconfont {
  font-family: "iconfont" !important;
  font-size: pr(44);
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: pr(0.4);
  -moz-osx-font-smoothing: grayscale;
}

.header {
  height: pr(88);
  background-color: #ff8b00;
  box-shadow: 0 pr(4) pr(4) #ccc;
  padding: 0 pr(30);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .left {
      width: pr(50);
      height: 100%;
      a {
          height: 100%;
          width: pr(44);
          i {
              position: absolute;
              top: pr(24);
              color: #fff;
              font-size: pr(40);
          }
      }
  }
  .center {
      h1 {
          font-size: pr(40);
          color: #fff;
          font-weight: 400;
      }
  }
  .right {
      width: pr(50);
      height: 100%;
      a {
          height: 100%;
          width: pr(44);
          img {
              width: 100%;
              &:nth-child(1) {
                  margin-top: pr(18);
              }
          }
      }
  }
}

// ---- 内容 ---
.box {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  

//   头部
  .hd {
      display: flex;
      
      border-bottom: pr(2) solid #dadada;
      .filter {
          flex: 1;
          height: pr(76);
          ul {
              height: 100%;
              display: flex;
              li {
                  width: 33.333333%;
                  a {
                      width: 100%;
                      height: 100%;
                      font-size: pr(32);
                      color: #565656;
                      line-height: pr(76);
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      .fa-sort-desc {
                          margin-left: pr(12);
                          height: pr(40);
                      }
                      .fa-sort-up {
                          margin-left: pr(12);
                          height: pr(12);
                      }
                  }
              }
          }
      }
      .search {
          flex-basis: pr(92);
          border-left: pr(2) solid #dadada;
          height: pr(76);
          a {
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
          }
      }
  }
  .bd {

      background-color: #f1f1f1;
      padding: pr(12) 0;
      
      ul {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          li {
            //   width: 50%;

              width: pr(348);
              background-color: #fff;
              margin-bottom: pr(16);
              &:nth-child(odd) {
                  margin-left: pr(16);
              }
              &:nth-child(even) {
                  margin-right: pr(16);
              }
              a {
                  .pic {
                      // 官网拔来就是这么大
                      img {                         
                          width: pr(348);
                          height: pr(348);
                      }
                  }
                  .title {
                      font-size: pr(24);
                      color: #333333;
                      padding: 0 6px;
                      height: 14px;
                      overflow: hidden;
                      line-height: 14px;
                      font-weight: normal;
                      text-align: left;
                      margin-top: 6px;
                  }
                  .other {
                      color: #f8601d;
                      padding: 6px;
                      .price {
                          font-size: pr(40);
                      }
                  }
              }
          }
      }
  }
  .fd {
      position: absolute;
      top: pr(80);
      left: 0;
      height: 0;
      width: 100%;
      box-shadow: 0px 3px 6px #dddddd;
      ul {
          background-color: #fff;
            
          li {           
              height: pr(80);
              border-bottom: pr(1) solid #dadada;
              padding: 0 pr(20);
              a {
                  height: 100%;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  span {
                      font-size: pr(32);
                      color: #5a5a5a;
                      &:nth-child(2) {
                          color: orangered;
                          padding-right: pr(10);
                      }
                  }
              }
          }
      }
  }
  

    // 搜索
    .popsearch{
        width: 100%;
        background-color: #ffffff;
        font-size: 16px;
        // 设置为none 就隐藏
        display: none;

        .formsch{

            .txt{
                display: block;
                width: 85%;
                background-color: #fff;
                border-radius: 5px;
                padding: 5px 10px;
                margin-top: 10px;                              
            }

            // 搜索
            .smt{
                display: block;
                float: right;
                position: absolute;
                right: 20px;
                top: 37px;
                font-size: 30px;
                }            
        }

        // 排序
        .select{
            .orderBy{

                display: flex; 
                div{
                    flex: 25%;
                    height: 40px;
                    text-align: center;
                    border: 1px solid #cccccc;
                    border-radius: 5px;
                }
            }                       
        }
        // 分类
        .c{
            display: flex;
            flex-wrap: wrap;

            justify-content: space-between;
            div{  
                margin: 3px 3px;
                flex: 25%;
                color: #666666;
                font-size: 14px; 
                text-align: center;
                line-height: 38px;          
                // background-color: #ff8b00;
                border: 1px solid #cccccc;
                border-radius: 5px;
                
            }
        }

    }

       
}